<template>
  <div class="goods">
    <div class="manage">
      <el-dialog
        :title="operateType === 'add' ? '新增用户' : '更新用户'"
        :visible.sync="isShow"
      >
        <el-form label-width="100px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="战队" prop="team">
            <el-input v-model="team" placeholder="请输入战队"></el-input>
          </el-form-item>
          <el-form-item label="定位" prop="seat">
            <el-select v-model="seat" placeholder="请选择定位">
              <el-option label="上单" value="上单"></el-option>
              <el-option label="打野" value="打野"></el-option>
              <el-option label="中单" value="中单"></el-option>
              <el-option label="ADC" value="ADC"></el-option>
              <el-option label="辅助" value="辅助"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="擅长英雄" prop="hero">
            <el-input v-model="hero" placeholder="请输入擅长的英雄"></el-input>
          </el-form-item>
          <el-form-item label="国籍" prop="country">
            <el-input v-model="country" placeholder="请输入国籍"></el-input>
          </el-form-item>
          <el-form-item label="  " prop="btn">
            <el-button @click="isShow = false" icon="el-icon-close">取消</el-button>
            <el-button type="success" icon="el-icon-check" @click="submit">确定</el-button>
        </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <div class="header">
      <el-input  @change="get"  v-model="input"  placeholder="请输入内容"
      ></el-input>
      <el-button type="info" icon="el-icon-search">查询</el-button>
      <el-button type="primary" @click="addGoods" icon="el-icon-plus">添加</el-button>
    </div>
    <div class="wrapper">
      <el-table  :data="tableData.slice((cur-1)*pageSize, cur*pageSize)"  style="width: 100%"  :default-sort="{ prop: 'date', order: 'descending' }">
        <el-table-column prop="name" label="姓名" sortable width="180">
        </el-table-column>
        <el-table-column prop="team" label="战队" sortable width="180">
        </el-table-column>
        <el-table-column prop="seat" label="定位" sortable width="180">
        </el-table-column>
        <el-table-column prop="hero" label="擅长英雄" sortable width="180">
        </el-table-column>
        <el-table-column prop="country" label="国籍" sortable width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align:center;margin:20px">
      <el-pagination background layout="prev, pager, next" @current-change="current_change"
        :total="tableData.length" :page-size="pageSize">
      </el-pagination>
  </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  inject: ["reload"],
  name: "Goods",
  components: {
  },
  data() {
    return {
      name: '',
      team: '',
      seat: '',
      hero:'',
      country: '',
      id:'',
      operateType: "add",
      isShow: false,
      input: "",
      tableData: [],
      cur:1,//当前页
      total:0,//总页数
      pageSize: 8,//每页展示的内容
    };
  },
  //生命周期函数
  created() {
    this.$api.getGoodsList().then((res) => {
      this.tableData = res.data;
    });
  },
  methods: {
    current_change(newPage){
      this.cur = newPage
    },
    createId(){//生成随机id
      var code= '';
      var codeLength = 4;
      var random = new Array(0,1,2,3,4,5,6,7,8,9);
      for(var i = 0; i <codeLength; i++){
        var index = Math.floor(Math.random()*9)
        code += random[index]
      }
      return code
    },
    handleEdit(row) {
      this.operateType = "edit";
      this.isShow = true;
      this.id = row.id;
      this.name = row.name;
      this.team = row.team;
      this.seat = row.seat;
      this.country = row.country;
      this.hero = row.hero
    },
    get(val) {//查询操作
      axios
        .get("http://localhost:9999/glist/get", {
          params: {
            name: val,
          },
        })
        .then((res) => {
          this.tableData = res.data;
        })
        .catch((err) => {
          console.log(获取数据失败);
        });
    },
    submit() {
      if (this.operateType === "add") {//添加商品
        axios.get('http://localhost:9999/glist/add', {
            params: {
              id:this.createId(),
              name:this.name,
              team:this.team,
              seat:this.seat,
              country:this.country,
              hero:this.hero,
            }
          }).then((res) => {
            this.reload();
            this.isShow = false
          }).catch((err) => {
            console.log("数据获取失败" + err);
          });
      }else {//编辑商品
        axios.get('http://localhost:9999/glist/update',{
          params:{
            id: this.id,
            name: this.name,
            team: this.team,
            seat: this.seat,
            country: this.country,
            hero:this.hero,
          }
        }).then(res=>{
          this.isShow = false
          this.reload()
        }).catch(err=>{
          console.log('数据获取失败' +err)
        })
      }
    },
    addGoods() {//添加商品 打开表单
      this.isShow = true;
      this.operateType = "add";
      this.name = '',
      this.country = '',
      this.team = '',
      this.seat = '',
      this.hero = ''
    },
    del(row) {//删除商品
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios
            .get("http://localhost:9999/glist/del", {
              params: {
                name: row.name,
              },
            })
            .then((res) => {
              this.reload();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
        })
        .catch((err) => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang='less' scoped>
.goods {
  margin: 20px;
  height: 592px;
}
.header {
  display: flex;
  button {
    margin-left: 20px;
  }
}
.wrapper {
  margin: 20px;
}
</style>
